<template>
  <div class='photo'>
    <van-uploader :after-read="onRead" accept="image/*" class="bc-white">
      <img :src="listData||defaultImg" :class="{default:listData=='','my-photo':true,rotate}" alt="生活">
    </van-uploader>
    <van-button type="primary" @click="save" class="bc-green btn-sure">确定</van-button>
  </div>
</template>
<script>
import MixIns from '../../../mixin/mixin.js'
export default {
  components: {},
  name: "",
  data() {
    return {
      defaultImg:require('../../../assets/images/center/img.png'),
      file:{},
      rotate:false
    };
  },
  methods: {
    onRead(file){
      var that=this
      _g.showLoading()
      var img=new Image()
      img.src = file.content
      img.onload=function(){
        var orient = _g.getPhotoOrientation(img)
        if(orient == 6){
          that.rotate=true
        }
        that.$set(that,"listData",file.content)
        _g.closeLoading()
      }
      that.$set(that,'file',file)
    },
    save(){
      if(!this.file.file){
        _g.toMessage({error:1,msg:"没有选中照片"})
        return
      }
      _g.showLoading()
      _g.littleImg(this.file.file,this.saveback)
    },
    saveback(file){
      let data = new FormData();
      data.append('file', file);
      if(sessionStorage.getItem('number')&&data)data.append('number',sessionStorage.getItem('number'));
      $axios.post(PATH+'User/updatePhoto',data).then(res=>{
        _g.toMessage(res.data)
        if(!res.error){
          // this.getListData()
          // this.file={}
          this.$router.go(-1)
        }
      })
    }
  },
  created() {},
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.photo {

  .my-photo{
    width: 50vw;
    height: 50vw;
    // min-width: 150px;
    border-radius: 50%;
    margin: 50px 25vw;
    box-shadow: 2px 2px 10px 0px #999;
  }
  .my-photo.default{
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: auto;
  }
  .btn-sure{
    width:90%;
    margin:120px 5%;
    font-size: 18px;
  }
  .bc-white{
    width: 100%;
  }
  .rotate{
    transform: rotate(90deg)
  }
}
</style>